<html xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.8/css/layui.min.css"  />
        <script src="https://cdn.staticfile.org/layui/2.6.8/layui.min.js" ></script>
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
        <script src="../../res/js/mz.common.js"></script>
        <style>
            .layui-form-label{width: 320px;}
            .layui-input-block{margin-left: 400px;}
        </style>
    </head>
    <body>

        <div id="app" style=" margin: 10px;">

            <div class="layui-form layui-form-item">
                <div class="layui-form-label">
                    <a class="layui-btn layui-btn-xs" v-on:click="root()">ROOT</a>
                    <a class="layui-btn layui-btn-xs" v-on:click="last()">BACK</a>
                    <a class="layui-btn layui-btn-xs" v-on:click="edit(path, 'create')" style="font-size: 20px;">+</a>
                    <a class="layui-btn layui-btn-xs" href="gen.html">GEN</a>
                    <label style="margin-left: 30px;">模板路径</label>
                </div>
                <div class="layui-input-block">
                    <input type="text" v-model="path" class="layui-input" readonly="readonly" />
                </div>
            </div>

            <div>
                <table class="layui-table">
                    <tbody>
                        <tr v-for="item in list">
                            <td>
                                <a v-on:click="goto(item.path)" v-if="item.isDir" style="text-decoration: underline;">{{item.name}}</a>
                                <a href="javascript:void(0)" v-if="!item.isDir">{{item.name}}</a>
                            </td>
                            <td style="text-align: center; width: 100px;">
                                <a class="layui-btn layui-btn-xs" v-if="item.isDir" v-on:click="goto(item.path)">跳转</a>
                                <a class="layui-btn layui-btn-xs" v-if="!item.isDir" v-on:click="edit(item.path, 'edit')">编辑</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>



        </div>


        <script>

            window.data = {
                path: '/',
                last_path: [],
                list: [],
                show_modal: false,
                fields: []
            };

            window.methods = {
                root: function (){
                    this.path = '/';
                    loadList('/');
                },
                goto : function (path) {
                    this.last_path.push(this.path);
                    this.path = path;
                    loadList(path);
                },
                last: function () {
                    var path = this.last_path.pop();
                    if(path){
                        this.path = path;
                        loadList(path);
                    }
                },
                edit : function (path, op) {
                    location.href = './edit.html?op=' + op + '&path=' + encodeURI(path);
                }
            }

            //加载模块
            layui.use(['jquery'], function(){
                loadList(vm.$data.path);
            });

            function loadList(path) {
                layui.$.get(base_context + '/template/listTemplateFiles', {path: path}, function(res){
                    if(res.success){
                        vm.$data.list = res.data;
                    }
                })
            }


            window.vm = initVue();
        </script>

    </body>
</html>
